<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="root"></div>
<script src="../../javascript/react.js"></script>
<script src="../../javascript/react-dom.js"></script>
<script src="../../javascript/babel.js"></script>
<script type="text/babel">

    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                count: 0,
                message: "字符串",
                array: [1, 2, 3, 4, 5],
                aaa: null,
                bbb: undefined,
                ccc: true,
                object: {name: "ATO"},
                firstName: "陶",
                lastName: "品奇"
            }
        }

        render() {
            const {count, message, array} = this.state
            const {aaa, bbb, ccc} = this.state
            const {object} = this.state
            const fullName = () => this.state.firstName + '' + this.state.lastName
            const result = this.state.count + this.state.message
            return (
                <div className="app">
                    {/*Number/String/Array可以直接显示*/}
                    <h2>{count}</h2>
                    <h2>{message}</h2>
                    <h2>{array}</h2>
                    {/*null/undefined/Boolean显示为空*/}
                    <h2>{aaa + ''}</h2>
                    <h2>{bbb}</h2>
                    <h2>{ccc}</h2>
                    {/*Object类型不能作为内容插入*/}
                    {<h2>{object.name}</h2>}

                    {/*插入不同的表达式*/}
                    <h2>{10 + 20}</h2>
                    <h2>{ccc ? "成年" : "未成年"}</h2>
                    <h2>{fullName()}</h2>
                    <h2>{result}</h2>
                </div>
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>

</html>
